<template>
  <div class="container" v-loading="isLoading">
    <el-card>
      <template #header>
        <div class="table_tool">
          <el-button
            type="primary"
            icon="el-icon-plus"
            @click="showAddOrEdit = true"
            >新增</el-button
          >
        </div>
      </template>

      <el-table :data="tableData" border>
        <el-table-column prop="name" label="分类名称" />
        <el-table-column
          prop="summary"
          label="描述"
          align="center"
        />
        <el-table-column label="操作" width="120px" align="center">
          <template slot-scope="{ row }">
            <el-button
              type="text"
              @click="openEditRow(row, 'builingForm', initImg)"
              >编辑</el-button
            >
            <el-button type="text" class="red" @click="deleteById(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

    </el-card>

    <footer class="footer">
      <el-pagination
        background
        layout="total, sizes, pager, jumper"
        :current-page="searchForm.page"
        :page-sizes="[10, 20, 30, 50, 100]"
        :page-size="searchForm.page_size"
        :total="tableTotal"
        @size-change="changeSize"
        @current-change="changeCurrent"
      />
    </footer>

    <el-dialog
      :title="(builingForm.$id ? '编辑' : '新增') + '分类'"
      :visible.sync="showAddOrEdit"
      width="1000px"
      @closed="resetForm()"
    >
      <el-form
        :model="builingForm"
        ref="builingForm"
        label-width="7em"
      >
        <el-form-item prop="$id" hidden />

        <el-form-item label="分类名称" prop="name">
          <el-input
            v-model="builingForm.name"
            placeholder="请输入分类名称"
          ></el-input>
        </el-form-item>

        <el-form-item label="描述" prop="summary">
          <el-input
            v-model="builingForm.summary"
            type="textarea"
            row="6"
            placeholder="请输入描述"
          ></el-input>
        </el-form-item>

      </el-form>

      <template #footer>
        <el-button
          type="primary"
          @click="addCommunity()"
          :loading="loading.update"
          >确 定</el-button
        >
      </template>
    </el-dialog>

  </div>
</template>

<script>
import API from '@/api';
import { table, addOrEdit } from "@/utils/mixins";
import Upload from "@/components/Upload/SingleImage.vue";
export default {
  mixins: [table, addOrEdit],
  components: {
    Upload,
  },


  data: () => ({
    showAddOrEdit:false,

    searchForm: {
      page: 1, // 当前页码
      per_page: 20, // 每页条数
    },

    builingForm: {
      $id:"",
      name:'',
      summary:''
    },

  }),



  created:function(){
    this.getPermissionList()
  },

  methods: {
    // 获取类别列表
    getPermissionList(){
      this.loading=true
      API.getCommunityActType(this.searchForm)
        .then(({data}) => {
          this.tableData=data
          this.tableTotal=data.length
        }).catch((err) => {
          this.tableData=[]
          this.tableTotal=0
        }).finally(() =>{
          this.isLoading = false;
        })
    },

    // 分页
    changeSize(val){
      this.searchForm.per_page = val
      this.searchForm.page = 1
      this.getPermissionList()
    },

    // 分页
    changeCurrent(val){
      this.searchForm.page = val
      this.getPermissionList()
    },

    // 删除
    deleteById(id){
      let _that=this
      this.$confirm(`是否删除改社群？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
      .then(() => {
        API.delCommunityActType(id)
        .then(({data}) => {
          this.$message.success("删除成功！");
        }).catch((err) => {
        }).finally(() =>{
          this.getPermissionList()
          _that.showAddOrEdit=false;
        })
      })
      .catch(()=> {
      });
    },

    // 新增分类
    addCommunity(){
      if(!this.builingForm.name.trim()) return this.$message.error("分类名称不可为空~~");
      if(!this.builingForm.summary.trim()) return this.$message.error("描述不可为空~~")

      let data={
        name:this.builingForm.name,
        summary:this.builingForm.summary,
      }

      if(this.builingForm.$id){
        let id=this.builingForm.$id
        API.editCommunityActType(id,data)
          .then(({data}) => {
            this.$message.success("编辑成功！");
          }).catch((err) => {
          }).finally(() =>{
            this.resetForm()
            this.getPermissionList()
          })
      }else{
         API.addCommunityActType(data)
          .then(({data}) => {
            this.$message.success("编辑成功！");
          }).catch((err) => {
          }).finally(() =>{
            this.resetForm()
            this.getPermissionList()
          })
      }
    },

    resetForm(){
      this.builingForm.$id=""
      this.builingForm.name=""
      this.builingForm.summary=""
      this.showAddOrEdit=false
    },
  },
};
</script>

<style lang="scss" scoped></style>
